为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery实现简单的轮播图

标签:
JQuery

先看效果,如果是你想要的,可以看看

总体思路:

1.自动轮播
2.指定轮播
3.左右翻动


详细步骤:jQuery部分

  • 设置第一张图片显示,其他的兄弟元素隐藏

  • 自动轮播的时候,指定第一张的索引为 i=0,然后 i++, 使其对应的 i 索引的图片显示,其他的隐藏,当 i=5(即第六张图片的时候,使其为第一张即可,否则我们没有第六张图片就不显示了)。

  • 指定图片轮播,就是鼠标移动到白圈上显示对应的图片,并计时器停止,我们可以看看图片上的内容,有的轮播图计时器还是继续的,看不了什么内容;鼠标离开则继续轮播。

  • 左右翻动,左就是往左轮播,当 i = -1的时候使其为 4 (应该能知道什么意思吧,道理同自动轮播的括号里的内容),往右轮播同左。


好了不多说了,直接上代码
html

    <div id="banner">            <div class="pic">                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/4.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/5.jpg" width="520" height="280" alt=""/></div>            </div>            <ul class="tabs">                <li class="bg"></li>                <li></li>                <li></li>                <li></li>                <li></li>            </ul>            <div class="btn btn1">&lt;</div>            <div class="btn btn2">&gt;</div>        </div>

css

*{    margin:0px;    padding:0px;    list-style-type:none;}#banner{    width:520px;    height:280px;    position:absolute;    top:50%;    margin-top:-140px;    left:50%;    margin-left:-260px;}.pic img{    position:absolute;}.tabs{    position:absolute;    bottom:10px;    left:200px;}.tabs li{    width:20px;    height:20px;    border:2px solid #fff;    float:left;    margin-left:5px;    border-radius:100%;}.btn{    width:30px;    height:50px;    background-color:rgba(0,0,0,.5);    color:#fff;    font-size:30px;    line-height:50px;    text-align:center;    position:absolute;    top:50%;    margin-top:-25px;    cursor:pointer;}.btn:hover{    background-color:rgba(0,0,0,.8);    color:red;}.btn1{    left:0;}.btn2{    right:0;}.bg{    background-color:red;}

js

var i=0;var Timer;$(function(){    $(".picImg").eq(0).show().siblings().hide();   //默认第一张图片显示,其他的隐藏    //自动轮播    TimerBanner();    //点击红圈    $(".tabs li").hover(function(){  //鼠标移动上去        clearInterval(Timer); //让计时器暂时停止   清除计时器        i=$(this).index();   //获取该圈的索引        showPic();           //调用显示图片的方法,显示该索引对应的图片    },function(){  //鼠标离开        TimerBanner();    //继续轮播   计时器开始    });    //点击左右按钮    $(".btn1").click(function(){        clearInterval(Timer);        i--;   //往左        if(i==-1){            i=4;        }        showPic();        TimerBanner();    });    $(".btn2").click(function(){        clearInterval(Timer);        i++;   //往右        if(i==5){            i=0;        }        showPic();        TimerBanner();    });});//轮播部分function TimerBanner(){    Timer = setInterval(function(){        i++;        if(i==5){            i=0;        }        showPic()    },1000);}//显示图片function showPic(){    $(".picImg").eq(i).show().siblings().hide();    $(".tabs li").eq(i).addClass("bg").siblings().removeClass("bg");}


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消